<template>
  <div class="note-management-wrapper">
    <List>
      <ListItem v-for="note in noteList.data" :key="note.id">
        <ListItemMeta :description="note.create_time">
          <template slot="title">
            <h3>{{contentCut(note.content)}}</h3>
          </template>
          <template slot="avatar">
            <!-- 单张图片 -->
              <img
                :src="parseImgList(note.image_src)"
                style="width: 140px"
                v-if="typeof(parseImgList(note.image_src)) == 'string'"
              />

              <!-- 多张图片 -->
              <swiper :options="swiperOption" style="width: 140px" v-else>
                <swiper-slide v-for="(img,index) in parseImgList(note.image_src)" :key="index">
                  <div class="note-priview-box">
                    <img :src="img" style="width: 140px"/>
                  </div>
                </swiper-slide>

                <div class="swiper-pagination" slot="pagination" />
              </swiper>
          </template>
        </ListItemMeta>
        <template slot="action">
          <li>
            <a :href="'note_comments?nid='+note.id" :disabled="note.comment_count?false:true">评论列表({{note.comment_count}})</a>
          </li>
          <li>
            <a href="#" @click="showEditModal(note.id,note.content)">编辑</a>
          </li>
          <li>
            <a href="#" @click="showConfirmModal(note.id)" style="color: #e74c3c">删除</a>
          </li>
        </template>
      </ListItem>
    </List>
  </div>
</template>

<script>
import { getBasicInfo } from "../../utils/mixin";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import _ from "lodash";

export default {
  mixins: [getBasicInfo],
  data() {
    return {
      noteList: [],
      content: "",
      swiperOption: {
        loop: false,
        autoplay: false,
        pagination: {
          el: ".swiper-pagination",
          dynamicBullets: true,
          dynamicMainBullets: 1
        }
      },
    };
  },
  components: {
    swiper,
    swiperSlide
  },
  mounted() {
    this.fetchNote();
  },
  methods: {
    fetchNote() {
      this.axios.get(`/api/note?uid=${this.getUid}`).then(res => {
        this.noteList = res.data;
      });
    },
    contentCut: text => _.truncate(text, { length: 40 }),
    parseImgList: list => JSON.parse(list).url,
    showConfirmModal(id, title) {
      this.$Modal.confirm({
        title: "删除手记",
        content: `您确定要删除该条手记吗？`,
        onOk: () => {
          this.axios.delete(`/api/note/${id}`)
          .then(res => {
            this.fetchNote();
            this.$Message.success("删除成功");
          });
        }
      });
    },
    showEditModal(id, val) {
      this.$Modal.confirm({
        render: h => {
          return h("Input", {
            props: {
              value: val,
              placeholder: "请输入内容...",
              type: 'textarea',
              rows: 3
            },
            on: {
              input: val => {
                this.content = val;
              }
            }
          });
        },
        onOk: () => {
          this.axios
            .post("/api/note", {
              id: id,
              content: this.content
            })
            .then(res => {
              this.fetchNote();
              this.$Message.success("更新成功");
            })
            .catch(err => this.$Message.error(err));
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.note-management-wrapper {
  width: 75%;
  margin: 20px auto;

  .ivu-list-item-meta {
    align-items: center;
  }
}
</style>